<template>
  <view>
    <!-- see https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html#type-options   -->
    <uniPopup ref="popup" type="bottom" :safeArea="false" :isMaskClick="true" @maskClick="hide" background-color="#fff" borderRadius="20px 20px 20px 20px">
      <div class='popup-content'>
        <div class="dialog-title">
          <div class="dialog-title-content">
            {{ payload.content.tip }}
          </div>
          <div @click="hide">
            <image v-if="isTikTok" :src="iconClose" :style="{width:'16px', height:'16px'}"></image>
            <Icon v-else :src="iconClose" width="16px" height="16px"/>
          </div>
        </div>
        <div class="dialog-show-content">
          <div v-for="(item, index) in payload.content.inputVariables" :key="index">
            <div v-if="item.formType == 0 && payload.nodeStatus == 0">
              <InputMobile :placeholder="item.placeholder" :variableValue="item.variableValue" :name="item.name" :isRequired="item.isRequired" @input-change="handleInputChange" :validator="item.isRequired == 1 && isValid(item.name)"/>
            </div>
            <div v-else-if="item.formType == 1 && payload.nodeStatus == 0">
              <RadioMobile :chooseItemList="item.chooseItemList" :name="item.name" :isRequired="item.isRequired" @input-change="handleInputChange" :validator="item.isRequired == 1 && isValid(item.name)"/>
            </div>
            <div v-else class="variable-value-container-mobile">
              <div class="variable-value-label-mobile">
                {{ item.name }}
              </div>
              <div class="variable-value">
                {{ (item.variableValue == '' ||  item.variableValue == null) ? mapValue[item.name] : item.variableValue }}
              </div>
            </div>
          </div>
        </div>
        <div class="button-container" v-if="payload.nodeStatus == 0">
          <div class="button" @click="handleSendForm">
            {{ TUITranslateService.t("AIDesk.提交") }}
          </div>
        </div>
      </div>
    </uniPopup>
  </view>
</template>
<script>
import vue from '../../../../../../../adapter-vue';
import uniPopup from "../../../../../../common/uni-ui/uni-popup/components/uni-popup/uni-popup.vue";
import Icon from '../customer-icon.vue';
import iconClose from '../../../../../../../assets/dialog-close.png';
import InputMobile from './component-mobile/input-mobile.vue';
import RadioMobile from './component-mobile/radios-mobile.vue';
import LabelMobile from './component-mobile/label-mobile.vue';
import { TUITranslateService } from './../../../../../../../@aidesk/uikit-engine';
import { CUSTOM_MESSAGE_SRC } from "../../../../../../../constant";
import { isTikTok } from "../../../../../../../utils/env";
import { closeBottomPopup, showBottomPopup } from "../../../../../../../utils/utils";

const { ref } = vue;

export default {
  components: {
    uniPopup,
    Icon,
    InputMobile,
    RadioMobile,
    LabelMobile,
  },
  props: {
    payload: {
      type: Object,
      default: () => ({}),
    }
  },
  data() {
    return {
      isTikTok,
      iconClose,
      isSubmit: false,
      hasNullValue: true,
      TUITranslateService,
      mapValue: {},
    }
  },
  mounted() {
    let inputVariables = this.payload.content.inputVariables ?? [];
    for (let i = 0; i < inputVariables.length; i++) {
      const name = inputVariables[i].name;
      const variableValue = inputVariables[i].variableValue;
      this.mapValue[name] = variableValue;
    }
  },
  methods: {
    show() {
      // 底部弹出；app端 需要同时隐藏 message-input/toolbar-button/input-toolbar
      showBottomPopup(this.$refs.popup);
    },
    hide() {
      closeBottomPopup(this.$refs.popup);
    },
    handleInputChange({name,value}) {
      this.mapValue[name] = value;
    },
    isValid(name) {
      return this.isSubmit && (this.mapValue[name] == null || this.mapValue[name] == '' || this.mapValue[name] == undefined)
    },
    checkValidator(name) {
      this.hasNullValue = false;
      if (this.isSubmit == true) {
        if(this.mapValue[name] == null || this.mapValue[name] == '') {
          this.hasNullValue = true;
          return true;
        }
      }
      return false;
    },
    handleSendForm() {
      this.isSubmit = true;
      let list = this.payload.content.inputVariables;
      for (let i = 0; i < list.length; i++) {
        let value = this.mapValue[list[i].name];
        if (value !='' && value != null) {
          list[i].variableValue = value;
        } else {
          if (list[i].isRequired === 1  && this.checkValidator(list[i].name)) {
            return;
          }
        }
      }
      const submitData = {
        data: JSON.stringify({
          src: CUSTOM_MESSAGE_SRC.MULTI_FORM,
          content: {
            inputVariables: list
          },
          customerServicePlugin: 0,
        }),
      };
      this.$emit('sendMessage', submitData);
      this.isSubmit = false;
      this.hide();
    }
  }
}
</script>
<style scoped lang="scss">
.popup-content {
  background-color: #fff;
  background-image: url("https://web.sdk.qcloud.com/im/desk/assets/background_mobile_1.png");
  border-radius: 20px 20px 0px 0px;
  width: 100vw;
  max-height: 80vh;
  overflow-y: hidden;
  z-index: 500;

  .dialog-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 20px;
    margin-left: 5px;
    font-size: 16px;
    font-weight: 500;

    &-content {
      overflow-wrap: anywhere;
      word-break: normal;
    }

    .dialog-close {
      color: rgba(153,153,153,1);
    }
  }

  .dialog-show-content {
    overflow-y: auto;
    max-height: 50vh;

    .variable-value-container-mobile {
      padding: 16px;
      display: flex;
      flex-direction: row;
      align-items: center;
      border-bottom: 1px solid #e7e7e7;
      gap: 5px;
      width: 100%;
      box-sizing: border-box;
      overflow: hidden;
    }

    .variable-value-label-mobile {
      width: 100px;
      overflow-wrap: break-word;
      word-break: normal;
    }

    .variable-value {
      flex: 1;
      overflow-wrap: break-word;
      word-break: normal;
      min-width: 0;
    }
  }

  .button-container {
    padding: 20px;
    .button {
      padding: 9px 33px;
      border-radius: 20px;
      background: #1C66E5;
      font-weight: 500;
      font-size: 16px;
      color: #fff;
      cursor: pointer;
      text-align: center;
    }
  }
}
</style>

